<template>
  <h1>fetch API</h1>
  <div>
    <button type="button" @click="getRolePageHandler">角色分页列表</button>
    <button type="button" @click="postRolesHandler">新增角色</button>
    <button type="button" @click="putRolesByRoleID">put修改数据</button>
    <button type="button" @click="deleteRolesByids">delete:删除角色</button>
    <button type="button" @click="patchRolesStatusByRoleID">patch:更新角色状态</button>
  </div>
  <div>
    <ul>
      <li v-for="item in roles" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

import {
  getRolesPage,
  postRoles,
  putRolesByRoleID,
  deleteRolesByids,
  patchRolesStatusByRoleID
} from '@/service/study5/demo'

const roles = ref([])

const getRolePageHandler = async () => {
    const resJson = await getRolesPage()

    console.log(resJson, 'resJson');
    roles.value = resJson.data.list
}

const postRolesHandler = async () => {
  const resJson = await postRoles()
  console.log(resJson, 'resJson')
}
</script>

<style></style>
